<template>
    <div class="home">
        <div @click="show" class="nm" v-items>
            <span>{{ systemName }}</span>
            <span class="close" v-show="flag" >×</span>
            <span class="open" v-show="!flag" >√</span>
        </div>
        <!-- <div v-items @click="show" class="nm">{{systemName}}</div> -->
        <div class="list" v-show="flag">
            <div class="selectName"
                 v-for="(item,index) in menus" :key="index"
                 v-items="menus.epgConfig"
                 @click="seect(item.name)"
                 @focus="systemName=item.name"
                 :ref="item.name+'Tab'"
            >{{ item.name }}
            </div>
        </div>

        <div class="btn">
            <div v-items>取消</div>
            <div v-items>退出</div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'home',
    data() {
        return {
            systemName: "线路01",
            flag: true,
            menus: [
                {
                    name: "线路01",
                    epgConfig: {default: true}
                },
                {
                    name: "线路02"
                },
                {
                    name: "线路03"
                },
            ]
        }
    },

    mounted() {
        //页面加载后，移动到默认焦点
        this.$service.move(this.$service.pointer)
        console.log(this.$service);
    },


    methods: {
        //系显示切换
        show() {
            this.flag = !this.flag;
        },

        seect(name) {
            this.systemName = name;
            this.flag = !this.flag;
        },

        //控制遥控按键
        moveLeft() {
            console.log('moveLeft');
            let swiper = this.$refs.mySwiper.swiper;
            swiper.slidePrev()
            this.$service.move(this.$refs['demandItem' + swiper.activeIndex][0])
        },
        moveRight() {
            console.log('moveRight');
            let swiper = this.$refs.mySwiper.swiper;
            swiper.slideNext()
            this.$service.move('right')
        },
        moveUp() {
            console.log('moveUp');
            this.$service.move(this.$refs[this.systemName + 'Tab'][0])
        },
        moveDown() {
            console.log('moveDown');
            this.$service.move(this.$refs.toFood)
        },


    },
    watch: {
        "flag": function (newFlag, oldFlag) {
            this.$service.move(this.$service.pointer)
        }
    },

}
</script>

<style lang="scss" scoped>

.home {
    width: 340px;
    position: relative;
    margin: 0 auto;
    margin-top: 100px;
}

.selectName {
    width: 340px;
    // height:66px;
    border: 0.9px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    float: left;
    text-align: center;
    font-size: 26px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    // line-height:66px;
    letter-spacing: 4px;
    position: relative;

}

.list {
    height: 425px;
    position: absolute;
    top: 76px;
    z-index: 100;
    overflow-y: auto;

    .selectName {
        background-color: #fff;
    }
}

.btn {
    position: absolute;
    top: 400px;
    width: 100%;
    text-align: center;

    div {
        display: inline-block;
        width: 80px;
        line-height: 40px;
        background-color: #000;
        color: #fff;
    }

    div:nth-child(1) {
        margin-right: 20px;
    }

    div:nth-child(2) {
        margin-left: 20px;
    }
}

.focus {
    border: 5px solid #fcb903 !important;
}

.nm {
    font-size: 26px;
    line-height: 60px;
    background: #ccc;
    border: 0.9px solid rgba(220, 220, 220, 1);

    img {
        display: inline-block;
        position: absolute;
        right: 20px;
        top: 17px;

    }

    .close {
        width: 20px;
        height: 28px;
    }

    .open {
        width: 28px;
        height: 20px;
    }
}
</style>
